[小ネタ]LIFFの開き方を検証してみた #LINE_API

はじめに

こんにちは、中村です。
最近LIFFアプリの開発をしています。LIFF登録したドメインと別のドメインへ遷移した時の挙動（正しくLIFFアプリとして初期化されユーザーIDやアクセストークンが取得できるか）を確認してみました。

LIFFの作成についてはこちらを利用してください。

はじめてのLIFF #LINE_API

※同一ドメインで別ページの場合の結果を追記しました（2019.7.23）

LIFFの開き方を検証してみた

まずは、ベースとなるLIFFアプリを作成します。LIFF SDKを読み込みを行い初期化します。初期化が完了するとユーザーID・アクセストークンを取得できるので、id指定した項目部分にそれらをinnerTextでテキスト文として返します。

LIFF SDK
https://d.line-scdn.net/liff/1.0/sdk.js

liff.init(
    data => {
        const userId = data.context.userId;
        document.getElementById('userId').innerText = userId;
        const accessToken = liff.getAccessToken();
        document.getElementById('accessToken').innerText = accessToken;
    },
    err => {
        console.log(err);
        document.getElementById('error').innerText = err;
    }
);

作成したhtmlをサーバーへアップロードし、LIFFヘURLを登録します。 LINEからLIFFヘアクセスすると、ユーザーID・アクセストークンが確認できます。またLINE以外のブラウザからアクセスするとエラーが表示されます。

同ドメインの場合

同ドメインの場合は、ユーザーID・アクセストークンが取得できます。Verify-2として最初のLIFFアプリと同じ環境へデプロイしました。そのため同じドメインの場合で複数ページがある場合においても1つ登録しておけば良さそうです。

LIFFアプリ登録をしていない場合

では、作成したLIFFから別ドメイン（LIFF未登録）へ遷移してみましょう。新たに別ドメインにホスティングし先ほど作成したLIFFアプリから遷移します。1番最初に登録したLIFFアプリに2番目のアプリのURLのリンクを追加してデプロイします。 当然ですがLINE開発者コンソールでLIFFとして登録していないため、先ほど同様エラーが表示されます。

LIFFアプリ登録をした場合

リンク遷移

次に2番目にホスティングしたページをLIFFアプリとして登録します。それでは、リンクをクリックしてみましょう。こちらもエラーが表示されます。

LIFF API遷移

liff.openWindow()を使ってリンクに遷移します。下記のサンプルコードを参考に最初のLIFFアプリに追加していきます。externalプロパティをfalseにすることで内部ブラウザで表示されます。

liff.openWindow({
    url: 'https://xxxxxxx.com/',
    external: false
})

このAPIを利用した場合も、LIFFはエラーとなってしまいます。

リンク遷移（LIFF URL）

最後にLIFF URLを利用した遷移です。LIFFをLINE開発者コンソールで登録した時に、line://app/xxxxxxxxのようなURLが発行されます。このURLをリンクへ登録した場合はどうなるか確認してみます。このURLは通常外部に公開されないようにします。なぜかと言うとLIFFアプリで開くページのURLのフラグメントにはアクセストークンやユーザーIDが含まれているからです。最初のLIFFアプリにLIFF URLを追加してアクセスしてみましょう。

LIFFのブラウザが一度消えてから新規でブラウザが起動し表示されるかと思います。またユーザーID・アクセストークンも問題なく確認できると思います。

まとめ

LIFFから想定される遷移をまとめました。この結果、LINE開発者コンソールでLIFFアプリとして登録されている・LIFF URLからのアクセスが必須であると言うことがわかりました。理想は1つのドメイン内で全て用意できると良いのですが、開発の仕方や現行システムとの兼ね合いなど様々な状況からドメインが分かれてしまうことが想定されます。LIFF URLをhtmlに記載することで回避が可能ですが、ブラウザが一度閉じてから新規で開いたり、htmlにLIFF URLを記載したりと課題もある状況です。